<template>
  <div style="margin-top: 20px;padding-bottom: 50px;">
    <div>
      <van-radio-group v-model="radio"
                       @change="RadioChange">
        <van-radio v-for="(item, i) in insc"
                   :key="i"
                   :name="item._id">{{item.name}}</van-radio>
      </van-radio-group>
    </div>
    <div class="AllInsc">
      <div v-for="(item, i) in show"
           :key="i"
           class="insc"
           @click="openEject(item)">
        <ImgShow :name="item.name"
                 :icon="$upload+item.icon"
                 :size="70"></ImgShow>
      </div>
    </div>
    <div v-if="isEject">
      <van-popup v-model="isEject"
                 round
                 position="bottom"
                 transition-appear>
        <div class="icon">
          <ImgShow :icon="$upload+ejectShow.icon"
                   :size="70" />
        </div>
        <div class="main">
          <div>【铭文名称】{{ejectShow.name}}</div>
          <div>
            【属性加成】
            <span v-if="Number(ejectShow.descript.Physical_attack) !== 0">物理攻击：+{{ejectShow.descript.Physical_attack}}</span>
            <span v-if="Number(ejectShow.descript.Attack_speed) !== 0">攻击速度：+{{ejectShow.descript.Attack_speed}}%</span>
            <span v-if="Number(ejectShow.descript.Physical_vampire) !== 0">物理吸血：+{{ejectShow.descript.Physical_vampire}}%</span>
            <span v-if="Number(ejectShow.descript.Spell_penetration) !== 0">法术穿透：+{{ejectShow.descript.Spell_penetration}}</span>
            <span v-if="Number(ejectShow.descript.Maximum_life) !== 0">最大生命：+{{ejectShow.descript.Maximum_life}}</span>
            <span v-if="Number(ejectShow.descript.Spell_defense) !== 0">法术防御：+{{ejectShow.descript.Spell_defense}}</span>
            <span v-if="Number(ejectShow.descript.Physical_penetration) !== 0">物理穿透：+{{ejectShow.descript.Physical_penetration}}</span>
            <span v-if="Number(ejectShow.descript.Crit_chance) !== 0">暴击几率：+{{ejectShow.descript.Crit_chance}}%</span>
            <span v-if="Number(ejectShow.descript.Spell_attack) !== 0">法术攻击：+{{ejectShow.descript.Spell_attack}}</span>
            <span v-if="Number(ejectShow.descript.Spell_vampire) !== 0">法术吸血：+{{ejectShow.descript.Spell_vampire}}%</span>
            <span v-if="Number(ejectShow.descript.Physical_defense) !== 0">物理防御：+{{ejectShow.descript.Physical_defense}}</span>
            <span v-if="Number(ejectShow.descript.Healing_every_five_seconds) !== 0">每五秒回血：+{{ejectShow.descript.Healing_every_five_seconds}}</span>
            <span v-if="Number(ejectShow.descript.Moving_speed) !== 0">移动速度：+{{ejectShow.descript.Moving_speed}}%</span>
            <span v-if="Number(ejectShow.descript.Cooldown_reduction) !== 0">冷却缩减：+{{ejectShow.descript.Cooldown_reduction}}%</span>
            <span v-if="Number(ejectShow.descript.Crit_effect) !== 0">暴击效果：+{{ejectShow.descript.Crit_effect}}%</span>
            <span v-if="Number(ejectShow.descript.Max_mana) !== 0">最大法力：+{{ejectShow.descript.Max_mana}}</span>
            <span v-if="Number(ejectShow.descript.Blue_every_five_seconds) !== 0">每五秒回蓝：+{{ejectShow.descript.Blue_every_five_seconds}}</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import ImgShow from '../utils/ImgShow.vue'
import { getInsc } from '@/api/introduction'
export default {
  components: { ImgShow },
  data () {
    return {
      insc: [],
      radio: 0,
      show: [],
      isEject: false,
      ejectShow: {}
    }
  },
  methods: {
    fetch () {
      getInsc().then(res => {
        this.insc = res.data
        this.radio = res.data[0]._id
      })
    },
    async RadioChange () {
      const tmp = this.insc.find(item => item._id === this.radio)
      this.show = tmp.children
    },
    openEject (item) {
      this.isEject = !this.isEject
      this.ejectShow = item
    }
  },
  created () {
    this.fetch()
  }
}
</script>
<style lang="less" scoped>
.van-radio-group {
  display: flex;
  justify-content: space-around;
}
.AllInsc {
  display: flex;
  flex-wrap: wrap;
  .insc {
    margin-top: 10px;
    width: 25%;
    height: 85px;
  }
}
</style>
